
<template>
	<view class="page">
        <view class="g-input f-border1px">
            <text class="u-input-title">手机号码 :</text>
        	<input class="u-input" type="number" placeholder="请输入手机号码" maxlength="11" v-model="mobile">
        </view>
        <view class="g-input f-border1px">
            <text class="u-input-title">验证码 :</text>
			<input class="u-input" type="number" placeholder="请输入验证码" maxlength="6" v-model="code">
			<button class="u-get-code" @tap="getCode">{{nCountdown ? nCountdown+' s' : '获取验证码'}}</button>
        </view>
		<view class="g-input f-border1px">
		    <text class="u-input-title">设置密码 :</text>
			<input class="u-input" password type="text" placeholder="请输入密码" v-model="password">
		</view>
		<view class="g-input f-border1px">
		    <text class="u-input-title">确认密码 :</text>
			<input class="u-input" password type="text" placeholder="请确认密码" v-model="cpassword">
		</view>
        <button class="u-confirm" @tap="confirm()">确 认</button>
	</view>
</template>

<script>
    import henglang from '@/common/common.js';
	import md5 from '@/common/md5.js';
	
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				password: '',
				cpassword: '',
                nCountdown: 0
			};
		},
        methods:{
            // 获取验证码
            getCode() {
                let timer = null;
                let that = this;
                if (!that.nCountdown) {
					uni.showLoading({
						title: '正在发送'
					});
            		henglang.post('auth/sendLoginVerify',{mobile:that.mobile},false,function(res){
						uni.hideLoading()
						if(res.data.code == 0){
							henglang.showToast(res.data.msg,500);
							that.nCountdown = 60;
							timer = setInterval(() => {
							    that.nCountdown = --that.nCountdown;
							    if (!that.nCountdown) {
							        that.nCountdown = false;
							        clearInterval(timer);
							    }
							}, 1000)
						}else{
							henglang.showToast(res.data.msg);
						}
            		},function(res){
            			henglang.showToast('请求失败');
            			that.nCountdown = false;
						clearInterval(timer);
            			return;
            		});
                }
            },
            confirm() {
				let that = this;
				
				if (!henglang.checkPhone(that.mobile)) {
					henglang.showToast('请输入正确的手机号码');
					return;
				}
                if (!henglang.checkCode(that.code)) {
                    henglang.showToast('请输入正确的验证码');
                    return;
                }
				let reg = /^.{6,}$/;
				if (!reg.test(that.password)) {
				    henglang.showToast('密码至少6位数');
				    return;
				}
				if(that.password !== that.cpassword){
					henglang.showToast('两次输入的密码不一致');
					return;
				}
				let sendData = {
					mobile:that.mobile,
					code:that.code,
					password:md5(that.password),
					confirm_password:md5(that.cpassword)
				}
				henglang.post('auth/setPassword',sendData,false,function(res){
					if(res.data.code == 0){
						henglang.showToast(res.data.msg,500);
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}else{
						henglang.showToast(res.data.msg);
					}
				},function(res){
					henglang.showToast('请求失败');
					return;
				});
				
            },
            back() {
                uni.navigateBack();
            }
        },
        onReady() {
			
        }
	}
</script>
<style>
    .page {
        min-height: 100vh;
        background: #f5f5f5;
    }
    .u-tips-phone {padding: 10px;}
    .g-input {
        position: relative;
        background: #fff;
        height: 96upx;
        display: flex;
        align-items: center;
        color: #ccc;
        padding: 0 10px 0 10px;
    }
    .g-input.f-border1px {border-bottom: 1px solid #f5f5f5;}
    .g-input input {flex: 1;margin-left: 5px;color: #000;}
    .u-get-code {
        border-radius: 4px;
        color: #fff;
        background: #f7ba43;
        padding: 12upx 16upx;
        position: relative;
        z-index: 3;
    }
    .u-confirm {
        width: 90%;
        margin: 60upx 0 0 5%;
        border-radius: 100px;
        background: #d71311;
        color: #fff;
        text-align: center;
        padding: 30upx;
        font-size: 38upx;
    }
	.u-input-title{
		color: #000000;
	}
	.u-input{
		height: 36upx;
	}
</style>

